/**
* Created by ren on 2017/1/6.
*/
<template>
  <div class='loginPwd resetPayPwd'>
    <div style="margin: 24px 30px 55px 30px;color: #ff0000">
      定期更换密码可以让您的账户更加安全。请确保登录密码与交易密码不同！密码必须是6-20个英文字母、数字或符号，不能是纯数字或纯字母
    </div>
    <div class="item"><label>图形验证：</label><input type="text" placeholder="请输入图形验证码" v-model="imgCode"
                                                 style="width: 290px">
      <img v-lazy="getImgCode(imgUrl)" @click="valiCode"
           style="cursor: pointer;;margin: 0px;height: 48px;width: 100px;font-size: 16px;color: rgb(204, 204, 204); border: 1px solid rgb(204, 204, 204);background: white;margin-top: -2px;margin-left: 5px;">
    </div>
    <div class="item"><label>手机号：</label><input type="text" v-model="mobile" placeholder="请输入手机号">
    </div>
    <div class="item"><label>验证码：</label><input type="text" placeholder="请输入验证码" v-model="code" style="width: 268px">
      <button :class="{getmsgcode:true,btn:true,'getmsgcode':true,'disabled':msgStatus}" @click="getSMSCode"
              :disabled="msgStatus"
              style="margin: 0px;height: 48px;width: 123px;color: #0171d9;font-size: 14px; border: 1px solid rgb(204, 204, 204);background: white;margin-top: -2px;margin-left: 5px;">
        {{msgText}}
      </button>
    </div>
    <div class="item"><label>新密码：</label><input type="text" v-model="newPassword"></div>
    <div class="item"><label>确认新密码：</label><input type="text" v-model="confirmPassword"></div>
    <div class="btns" style="text-align: center;margin-bottom: 100px">
      <button class="btn" @click="forgetPwd" :disabled="!btnStatus">确认修改</button>
    </div>
    <Notify :parentThis='this'></Notify>
  </div>
</template>

<script>
  import API from '../../api'
  import Notify from '../Notify'
  export default {
    name: 'loginPwd',
    components: {
      Notify
    },
    data: function () {
      return {
        notifyStatus: 2,
        imgUrl: '',
        msgText: '获取验证码',
        msgStatus: true,
        mobile: '',
        imgCode: '',
        code: '',
        newPassword: '',
        confirmPassword: '',
        btnStatus: false
      }
    },
    methods: {
      getImgCode: function (url) {
        return API.imgcodeUrl + url.substring(url.indexOf('goldxianshang'))
      },
      getSMSCode: function () {
        if (!this.mobile) {
          this.notifyStatus = '0|电话号码不能为空！'
          return
        }
        if (!this.imgCode) {
          this.notifyStatus = '0|图形验证码不能为空！'
          return
        }
        this.$http.post(API.getCYSmsCode, {
          'mobile': this.mobile,
          'forget': '',
          'imgCode': this.imgCode,
          'imgUrl': this.imgUrl
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            var i = 60
            var s = setInterval(() => {
              if (i === 0) {
                this.msgText = '重新发送'
                this.msgStatus = false
                clearInterval(s)
                return
              }
              this.msgText = '(' + i + 's)后重新发送'
              i--
            }, 1000)
            this.msgStatus = true
            this.msgSendStatus = true
          } else if (result.code === 0) {
            this.notifyStatus = '0|' + result.message
            this.valiCode()
          }
        }, (err) => {
          console.log(err)
        })
      },
      valiCode: function () {
        this.$http.post(API.valiCode).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.imgUrl = result.object
          } else {
          }
        }, (err) => {
          console.log(err)
        })
      },
      forgetPwd: function () {
        if (this.mobile !== '' && this.imgCode !== '' && this.code !== '' && this.newPassword !== '' && this.confirmPassword !== '') {
          this.$http.post(API.forgetPwd, {
            imgCode: this.imgCode,
            imgUrl: this.imgUrl,
            mobile: this.mobile,
            code: this.code,
            newPassword: this.newPassword
          }).then((ret) => {
            const result = ret.body
            if (result.code === 1) {
              this.$router.push({name: 'login'})
            } else {
              this.notifyStatus = '0|' + result.message
            }
          }, (err) => {
            console.log(err)
          })
        } else {
          this.notifyStatus = '0|请将数据填写完整！'
        }
      }
    },
    watch: {
      mobile: function (newVal) {
        if (!this.msgSendStatus) {
          if (newVal && this.imgCode) {
            this.msgStatus = false
          } else {
            this.msgStatus = true
          }
        } else {
          this.msgStatus = true
        }
      },
      imgCode: function (newVal) {
        if (!this.msgSendStatus) {
          if (newVal && this.mobile) {
            this.msgStatus = false
          } else {
            this.msgStatus = true
          }
        } else {
          this.msgStatus = true
        }
      },
      code: function (newVal, oldVal) {
        if (newVal !== '' && !/^[0-9]*[1-9][0-9]*$/.test(newVal)) {
          this.code = oldVal
        }
      },
      newPassword: function (newVal) {
        if (/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){5,19}$/.test(newVal)) {
          if (newVal === this.confirmPassword && newVal !== '') {
            this.btnStatus = true
          } else {
            this.btnStatus = false
          }
        } else {
          this.notifyStatus = '0|密码必须是6-20个英文字母、数字或符号，不能是纯数字或纯字母'
        }
      },
      confirmPassword: function (newVal) {
        if (/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){5,19}$/.test(newVal)) {
          if (newVal === this.newPassword && newVal !== '') {
            this.btnStatus = true
          } else {
            this.btnStatus = false
          }
        } else {
          this.notifyStatus = '0|密码必须是6-20个英文字母、数字或符号，不能是纯数字或纯字母'
        }
      }
    },
    mounted: function () {
      this.valiCode()
    }
  }
</script>
